<template>
	<div :style="style" >
		<el-page-header @back="goBack" :content="blog.title"></el-page-header>
		<el-row>
			<el-button-group style="margin-bottom:20px" v-show="formManage">
				<el-button type="primary" icon="el-icon-edit" size="small" @click="edit">修改</el-button>
				<el-button type="danger" icon="el-icon-delete" size="small" @click="toRecovery">放入回收站</el-button>
			</el-button-group>
		</el-row>
		<el-row class="classify">
			<span>分类：</span>
			<span>{{classifyName}}</span>
			<span>创建人：{{blog.userName}}</span>
		</el-row>
		<el-row>
			<ul class="tagList">
				<li>标签：</li>
				<li v-for="t in blog.tagList" :key="t.tagId">{{t.tagName}}</li>
			</ul>
			<span class="date">修改日期：{{modifyDate}}</span>
			<span class="count">阅读数：{{blog.readCount}}</span>
		</el-row>
		<!-- <mavon-editor :ishljs="true"  ref="md" :value="blog.content" :toolbars="toolbars" :editable="false"
			:subfield="false" :scrollStyle="true" :defaultOpen="'preview'" style="margin: 10px 0px 40px 0px;height:600px;" 
			previewBackground="#ffffff" >
		</mavon-editor> -->

		<div v-html="blogContent" class="markdownbody"></div>
	</div>
</template>

<script>
import marked from 'marked'
	export default {
		name: 'BlogDetail',
		data() {
			return {
				blog: {},
				previewBackground: '',
				toolbars: {
					fullscreen: true, // 全屏
					navigation: true, // 导航目录
					preview: true, // 预览
				},
				classifyName:'',
				modifyDate:'',
				formManage:true,
				style:"",
				blogContent:""
			};
		},
		methods: {
			loadBlog(id) {
				this.axios.get('/blog/' + id).then((res) => {
					if (res.data.success) {
						this.blog = res.data.blog;
						this.classifyName = this.blog.classify.classifyName;
						this.modifyDate = this.blog.modifyDate.substring(0,10);
						this.blogContent = marked(res.data.blog.content);
					}
				})
			},
			edit() {
				this.$router.push('../edit/' + this.$route.params.id);
			},
			toRecovery(){
				this.axios.get('/blog/toRecovery/'+this.$route.params.id).then((res)=>{
					this.$message.success(res.data.msg);
					this.$router.push('/manage/recovery');
				});
			},
			FormManageCheck(){
				let path = window.location.hash;
				if(path.startsWith("#/manage")){
					this.formManage=true;
					this.style = "margin:0 auto;width:95%";
				}
				else{
					this.formManage=false;
					this.style = "margin:0 auto;width:85%";
					this.updateReadCount();
				}
			},
			goBack(){
				this.$router.go(-1);
			},
			updateReadCount(){
				this.axios.get(`/blog/updateReadCount/${this.$route.params.id}`).then((res)=>{
				});
			}
		},
		mounted() {
			this.loadBlog(this.$route.params.id);
			this.FormManageCheck();
		}

	}
</script>

<style>
@import '../assets/css/markdown.css';
	* {
		margin: 0;
		padding: 0;
	}

	.title {
		font-size: 30px;
		float: left;
	}
	.tagList {
		list-style: none;
		
		font-size: 15px;
	}

	.tagList li {
		float: left;
		margin: 10px 5px 10px 0px;
		padding: 1px 10px 1px 10px;
	}

	.tagList li:first-child {
		font-weight: bold;
	}

	.tagList li:not(:first-child) {
		background-color: lightgray;
		border-radius: 2px;
	}

	.date,
	.count {
		margin: 10px 10px 10px 0px;
		font-size: inherit;
		line-height: inherit;
		float: right;
		font-weight: bold;
	}

	.count {
		margin-right: 30px;
	}


	.classify {
		margin-top: 1px;
		font-size: 15px;
	}

	.classify span:first-child {
		margin: 10px 2px 10px 0px;
		padding: 1px 10px 1px 10px;
		font-weight: bold;
	}

	.classify span:last-child {
		float: right;
		margin-right: 20px;
	}

	.classify span:nth-child(2) {
		background-color: gray;
		color: white;
		padding: 2px 5px 2px 5px;
	}
	.el-page-header{
		margin-bottom:20px;
	}
</style>
